<template>
    <page-view>
        <el-card>
            <template #header>
                <div class="flex flex-row justify-between items-center">
                    <div class="font-bold">编辑管理员信息</div>
                    <el-link type="primary" @click="$router.push({ name: 'AdminInfoList' })">返回列表</el-link>
                </div>
            </template>
                <el-form :model="formData" ref="adminFormEl" :rules="adminInfoRules">
                    <el-form-item label="管理员密码" prop="admin_pwd">
                        <el-input  v-model="formData.admin_pwd"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm" >
                            保存数据
                        </el-button>
                        <el-button type="danger" @click="resetForm">重置表单</el-button>
                    </el-form-item>
                </el-form>
        </el-card>
    </page-view>
</template>

<script setup>
import { mainStore } from "../../store"
import { ref, reactive, inject } from "vue"
import { ElNotification } from "element-plus"

import { useRouter, useRoute } from "vue-router"
import API from "../../utils/API";

// 路由管理对象
const router = useRouter();
// 路由单体对象
const route = useRoute();

const store = mainStore();
const formData = ref({
    id: "",
    admin_name: "",
    admin_pwd:"",
    admin_sex: "",
    admin_tel: "",
    admin_email: "",
    admin_photo: "",
    admin_type: 0
})




const adminInfoRules = {
    admin_pwd: [{ required: "true", message: "请输入密码", trigger: "blur" }],
}




// 提交表单

const adminFormEl = ref(null);
const submitForm = () => {
    adminFormEl.value.validate(valid => {
        if (valid) {
            updateAdminInfo();
        }
        else {
            ElNotification({
                type: "warning",
                title: "警告",
                message: "验证不通过，请重试"
            })
        }
    })
}

// 编写编辑管理员的方法
const isSubmiting = ref(false);
const updateAdminInfo = () => {
    isSubmiting.value = true;
    API.adminInfo.update(formData.value)
        .then(result => {
            ElNotification({
                type: "success",
                title: "修改成功",
                message: "管理员信息修改成功"
            })
            router.replace({ name: 'AdminInfoList' })
        }).catch(error => {
            ElNotification({
                type: "warning",
                title: "修改失败",
                message: "管理员信息修改失败"
            })
        }).finally(() => {
            isSubmiting.value = false;
        })
}

// 重置表单
const resetForm = () => {
    adminFormEl.value.resetFields();
}

</script>


<style lang="scss" scoped>
:deep(.el-upload) {
    @apply w-full h-full overflow-hidden;
}
</style>